import React from 'react';
import { FormPro } from '@/components';
import { FormInstance } from 'antd/lib/form';
import { FormItem } from '@/components/FormPro/types';
import { ListItem as ClassifyItem } from '@/service/image/getClassifyList';

type Props = { classifyItem: ClassifyItem };

class Edit extends React.PureComponent<Props> {
  static defaultProps = {
    classifyItem: {}
  }

  private form = React.createRef<FormInstance>();

  public onSubmit = async () => {
    return this.form.current?.validateFields();
  }

  get imgRegExp() {
    const {
      classifyItem
    } = this.props;
    return classifyItem.regExp;
  }

  get regMessage() {
    const {
      classifyItem
    } = this.props;
    return classifyItem.tip;
  }

  render() {
    const formList: FormItem[] = [
      {
        type: 'input',
        name: 'name',
        label: '图片名称',
        rules: [{
          required: true,
          message: '请输入图片名称'
        }]
      },
      {
        type: 'upload',
        name: 'imgUrl',
        label: '上传图片',
        upload: {
          regExp: this.imgRegExp,
          regMessage: this.regMessage
        },
        rules: [{
          required: true,
          message: '请上传图片'
        }]
      },
      {
        type: 'textArea',
        name: 'describe',
        label: '图片描述',
        rules: [{
          required: true,
          message: '请输入图片描述',
        }]
      }
    ];
    return (
      <FormPro
        ref={this.form}
        formList={formList}
      />
    )
  }
}

export default Edit;
